<template>
  <div>
    <el-container>
      <!-- 标题区域 -->
      <el-header class="header">
        <h2>欢迎光临</h2>
        <p>尊敬的 {{name}} 用户</p>
      </el-header>
      <!-- 主体区域 -->
      <el-main class="main">
        <p>
          实在不知道填什么内容，就拜个早年吧!
        </p>
      </el-main>
      <!-- 底栏区域 -->
      <el-footer class="footer">
        <el-collapse v-model="data.activeName" accordion>
          <el-collapse-item title="我是谁？">
            <div v-for="item in data.meWho" :key="item">
              <div>{{item}}</div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="你是谁？" name="2">
            <div v-for="item in data.youWho" :key="item">
            <div>{{item}}</div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="他是谁" name="3">
            <div v-for="item in data.heWho" :key="item">
              <div>{{item}}</div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="可控 Controllability" name="4">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>
        </el-collapse>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import data from 'common/data.js'
  export default {
    data() {
      return {
        name: this.$route.query.name,
        id:this.$route.query.id,
        data,
      }
    },
    methods: {
      login() {
        console.log(this.$route.query.name);
      }
    },
  }
</script>


<style lang="less" scoped>
  .header {
    position: relative;
  }

  .header h2 {
    position: absolute;
    right: 246px;
    text-align: center;
    font-size: 30px;
    color: #F56C6C;
  }

  .header p {
    position: absolute;
    top: 38px;
    right: 20px;
    color: #67C23A;
  }

  .main {
    margin-top: 50px;
    text-align: center;
    color: #303133;
  }

  .footer {
    margin-top: 60px;
  }
  .footer div{
    width: 100%;
    margin-right: 5px;
    text-align: center;
    box-sizing: content-box;
  }
  .footer span {
    width: 100%;
    text-align: center;
  }

</style>